<template>
  <el-autocomplete
    v-model="currentValue"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="handleSelect"
    :disabled="disabled"
    :placeholder="placeholder"
    :size="size"
    @blur="handelBlur"
    @change="handelChange"
  >
  </el-autocomplete>
</template>

<script>
  import { listCustomInfo } from "@/api/waitress/customInfo";

  export default {
    model: {
      prop: 'currentValue',
      event: 'change'
    },
    data() {
      return {
        options: [],
        currentValue: null,
      }
    },
    watch:{
      "value"(v){
        this.currentValue = v
      }
    },
    mounted() {
      this.currentValue = this.value
    },
    methods: {
      querySearchAsync(query, cb) {
        if (query) {
          let params = {...this.queryParams,...{pageNum: 1,pageSize: 10,roomName: query}}
          params[this.filterCode] = query
          listCustomInfo(params).then(res=>{
            let options = []
            for(let i in res.rows){
              let row = res.rows[i]
              options.push({
                value:row[this.optionValue],
                address:''
              })
            }
            this.options = options
            let results = query ? options.filter(this.createStateFilter(query)) : options;
            cb(results);
          })
        } else {
          this.options = [];
        }
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.$emit('cv', item.value);
      },
      handelBlur(){
         this.$emit('blur', this.currentValue);
      },
      handelChange(){
         this.$emit('change', this.currentValue);
      }
    },

    props: {
      placeholder: {
        type: String,
        default:'请输入业主名称'
      },
      value: {
        type: [String, Array, Number]
      },
      disabled: {
        type: Boolean,
        default: false
      },
      width: {
        type: Number
      },
      filterCode: {
        type: String,
        default:'customName'
      },
      optionValue: {
        type: String,
        default: 'id'
      },
      optionLabel: {
        type: [String , Array ],
        default: 'customName'
      },
      queryParams: {
        type:Object,
        default:()=>{}
      },
      size:{
        type: String,
        default:'small'
      }
    }
  }
</script>
